<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<!--
    This is similar to a button, but appears like a link instead. It's generally
    for non-destructive actions and should never navigate the page.

    ex. <a is="cr-action" on-tap="{{ doSomething }}"></a>

    Note: This element is very common on typical pages so it's been micro
    optimized to not contain any whitespace and not use data binding in the
    template.
-->
<polymer-element name="cr-action" extends="a" on-keyup="{{ handleKeyup }}" on-click="{{ handleClick }}">
    <template><style>
            :host {
                color: #1155CC;
                cursor: pointer;
                display: inline-block;
                text-decoration: none;
                -webkit-user-select: none;
            }

            :host(:hover) {
                text-decoration: underline;
            }
        </style><content></content></template>
    <script>
        Polymer({
            created: function() {
                this.href = "/#";
            },
            handleKeyup: function(event) {
                // Enter and spacebar keys
                if (event.keyCode == 13 || event.keyCode == 32) {
                    this.fire("tap");
                    event.preventDefault();
                }
            },
            handleClick: function(event) {
                if (this.href != "/#" && (event.metaKey || event.ctrlKey))
                    return;
                event.preventDefault();
            },
        });
    </script>
</ploymer-element>
